<p-splitter [style]="{width: '100vw', height: '100vh'}" [panelSizes]="[13, 75, 12]" [minSizes]="[1, 1, 1]">
    <ng-template #panel>
        <p-splitter layout="vertical" [panelSizes]="[70, 30]" [minSizes]="[1, 10]">
            <ng-template #panel>
                <app-user-data></app-user-data>
            </ng-template>
            <ng-template #panel>
                <app-track-edit></app-track-edit>
            </ng-template>
        </p-splitter>
    </ng-template>
    <ng-template #panel>
        <p-splitter layout="vertical" [panelSizes]="[75, 25]" [minSizes]="[1, 10]">
            <ng-template #panel>
                <app-map-canvas></app-map-canvas>
            </ng-template>
            <ng-template #panel>
                <app-track-chart></app-track-chart>
            </ng-template>
        </p-splitter>
    </ng-template>
    <ng-template #panel>
        <p-splitter layout="vertical" [panelSizes]="[90, 10]" [minSizes]="[1, 10]">
            <ng-template #panel>
                <app-track-info></app-track-info>
            </ng-template>
            <ng-template #panel>
                <div class="p-ml-3 p-mt-1" style="font-size: 12px;">
                    <a (click)="openSourceHomepage()" style="cursor: pointer;">
                        Enjoy open source ...
                    </a>
                </div>
            </ng-template>
        </p-splitter>
    </ng-template>

</p-splitter>


